"use client"

import { TrendingUp } from "lucide-react"
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"

import {
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
} from "~/registry/default/ui/card"
import type { ChartConfig } from "~/registry/default/ui/chart"
import {
   ChartContainer,
   ChartLegend,
   ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
} from "~/registry/default/ui/chart"

export const description = "A radar chart with a legend"

const chartData = [
   { month: "January", desktop: 186, mobile: 80 },
   { month: "February", desktop: 305, mobile: 200 },
   { month: "March", desktop: 237, mobile: 120 },
   { month: "April", desktop: 73, mobile: 190 },
   { month: "May", desktop: 209, mobile: 130 },
   { month: "June", desktop: 214, mobile: 140 },
]

const chartConfig = {
   desktop: {
      label: "Desktop",
      color: "hsl(var(--chart-1))",
   },
   mobile: {
      label: "Mobile",
      color: "hsl(var(--chart-2))",
   },
} satisfies ChartConfig

export default function Component() {
   return (
      <Card>
         <CardHeader className="items-center pb-4">
            <CardTitle>Radar Chart - Legend</CardTitle>
            <CardDescription>
               Showing total visitors for the last 6 months
            </CardDescription>
         </CardHeader>
         <CardContent>
            <ChartContainer
               config={chartConfig}
               className="mx-auto aspect-square max-h-[250px]"
            >
               <RadarChart
                  data={chartData}
                  margin={{
                     top: -40,
                     bottom: -10,
                  }}
               >
                  <ChartTooltip
                     cursor={false}
                     content={<ChartTooltipContent indicator="line" />}
                  />
                  <PolarAngleAxis dataKey="month" />
                  <PolarGrid />
                  <Radar
                     dataKey="desktop"
                     fill="var(--color-desktop)"
                     fillOpacity={0.6}
                  />
                  <Radar dataKey="mobile" fill="var(--color-mobile)" />
                  <ChartLegend
                     className="mt-8"
                     content={<ChartLegendContent />}
                  />
               </RadarChart>
            </ChartContainer>
         </CardContent>
         <CardFooter className="flex-col gap-2 pt-4 text-sm">
            <div className="flex items-center gap-2 font-medium leading-none">
               Trending up by 5.2% this month <TrendingUp className="size-4" />
            </div>
            <div className="text-muted-foreground flex items-center gap-2 leading-none">
               January - June 2024
            </div>
         </CardFooter>
      </Card>
   )
}
